<!DOCTYPE html>
<html>

	<head>
		<meta charset="UTF-8">
		<title>口袋租房</title>
		<link rel="stylesheet" href="../css/main.css" />
		<link rel="stylesheet" href="../css/iconfont.css" />
		<link rel="stylesheet" href="../css/swiper.css" />
		<script src="../js/jquery.min.js"></script>
		<script src="../js/utils.js"></script>
		<script src="../js/vue.min.js"></script>
		<script src="../js/swiper.min.js"></script>
		<script src="../js/pinyin.js"></script>
	</head>

	<body>
		<div id="page_header" class="page-header"></div>
		<div id="page_menu" class="content-area menu items-display-flex flex-row flex-between"></div>
		<div id="city_sets"></div>
		<div id="maincontent">
			<div class="search2-part">
				<div class="content-area">
					<div class="content items-display-flex flex-row">
						<div class="inputtxt">
							<input placeholder="请输入区域，楼盘名称开始找房" v-model="namekey"/>
						</div>
						<div class="search-btn" @click="doSearch">
							<img src="../img/index/search-white.png" />搜&nbsp;索
						</div>
					</div>
					<div class="nav">
						口袋租房<span class="lab iconfont icon-jiantou_xiangyouliangci"></span><span>{{region_name}}</span>
					</div>
				</div>
			</div>
			<div class="conditions-part">
				<div class="content-area">
					<div class="condition items-display-flex flex-row">
						<div class="lab">区域：</div>
						<div class="items items-display-flex flex-row">
							<div class="item" v-on:click="chooseArea(index)" v-for="(area,index) in areas" v-bind:class="{'orange-color':(index==areaindex)}">{{area.name}}</div>
						</div>
					</div>
					<div class="condition items-display-flex flex-row">
						<div class="lab">单价：</div>
						<div class="items items-display-flex flex-row">
							<div class="item" v-on:click="choosePrice(index)" v-for="(price,index) in prices" v-bind:class="{'orange-color':(index==priceindex)}">
								{{price.name}}
							</div>
							<div>
								<!--<input />&nbsp;-&nbsp;<input />&nbsp;万-->
							</div>
						</div>
					</div>
					<!--<div class="condition items-display-flex flex-row">
						<div class="lab">房型：</div>
						<div class="items items-display-flex flex-row">
							<div class="item" v-on:click="chooseHouseType(index)" v-for="(housetype,index) in housetypes" v-bind:class="{'orange-color':(index==htypeindex)}">
								{{housetype.name}}
							</div>
						</div>
					</div>-->
					<!--<div class="condition items-display-flex flex-row">
						<div class="lab">类型：</div>
						<div class="items items-display-flex flex-row">
							<div class="item" v-on:click="chooseHouseCategory(index)" v-for="(housestyle,index) in housestyles" v-bind:class="{'orange-color':(index==hsindex)}">
								{{housestyle.name}}
							</div>
						</div>
					</div>-->
				</div>
			</div>
			<div class="house-part">
				<div class="content-area" wx:if='houses.length>0' id="housecnt" style="display: none;">
					<div class="rent" v-for="(item,index) in houses">
						<div class="horizon"></div>
						<div class="items items-display-flex flex-row flex-between">
							<div class="top items-display-flex flex-row">
								<img class="icon" v-bind:src="item.brand.brandloge" />
								<div>
									<div class="lab1" >{{item.brand.bname}}</div>
									<div class="lab2">{{item.brand.title}}</div>
									<div class="lab3">{{item.list.length > 0 ? item.list[0].house_unit_price+'元/月':'暂无详情'}}<span></span></div>
									<div class="flags" v-if='item.list.length > 0'>
										<span v-for="mark in item.list[0].marks">{{mark}}</span>
									</div>
								</div>
							</div>
							<div class="right">
								<img src="../img/logo.png" />
								<div>押20<span>抵100</span></div>
							</div>
						</div>
						<div v-bind:class="['swp'+index]" class="pics swiper-container">
							<div class="swiper-wrapper">
								<div class="swiper-slide" v-for="chitem in item.list">
									<div class="itemcnt" v-on:click="showRentDetail(chitem.id)">
										<img v-bind:src="chitem.img_path" />
										<div class="per-pic-intro">{{chitem.house_name}}</div>
										<div class="per-pic-intro"><span style="margin-left: 0;">{{chitem.house_unit_price}}</span><label>元/月</label></div>
									</div>									
								</div>
							</div>
							<div v-if="item.list.length>4" class="swiper-button-next next" v-bind:class="['next'+index]"><span class="iconfont icon-nvxingfuben1"></span></div>
							<div v-if="item.list.length>4" class="swiper-button-prev prev" v-bind:class="['prev'+index]"><span class="iconfont icon-nvxingfuben"></span></div>
						</div>
					</div>
					<div class="horizon" v-if="houses.length>3"></div>
					<div class="nav-page items-display-flex flex-row" v-if="total_page > 0">
						<div v-for='(items,index) in page_nav' class="items-display-flex flex-row">
							<div class="nav items-display-flex flex-row" v-for="item in items">
								<div v-on:click="pageleft" v-if="item == 'left'" class="flag unactive-nav-page iconfont icon-nvxingfuben"></div>
								<div v-on:click="pageright" v-else-if="item == 'right'" class="flag unactive-nav-page iconfont icon-nvxingfuben1"></div>
								<div v-on:click="pageto(item)" v-else v-bind:class="[item==cur_pageindex ? 'active-nav-page':'unactive-nav-page']">{{item}}</div>
							</div>
							<div v-if="index < page_nav.length-1">...</div>
						</div>
					</div>
				</div>
			</div>
		</div>
		<div id="page_footer" class="page-footer"></div>
	</body>
	<script>
		$(document).ready(function() {
			loadHeaderAndFooter();
		});
		var allSwpipers = [];
		var maincnt = new Vue({
			el: '#maincontent',
			data: {
				areas: [],
				areaindex: -1,
				prices: [],
				priceindex: -1,
				sizes: [],
				sizeindex: -1,
				housetypes: [],
				htypeindex: -1,
				housestyles: [],
				hsindex: -1,
				houses: [],
				page_nav:[],
				cur_pageindex:1,
				pagesize:5,
				namekey:'',
				region_name:'',
				region:'',
				region_type:0,
				total_page:0,
				next_page:0
			},
			methods: {
				showRentDetail:function(rentid){
					var urlstr = 'rentdetail.html?houseid=' + rentid;
					window.open(urlstr);
				},
				doSearch:function(){
					loadHouseList();
				},
				chooseArea:function(index){
					this.areaindex = index;
					this.region = this.areas[this.areaindex].id;
					if(index == 0){
						this.region_type = 0;
					}
					else{
						this.region_type = 1;
					}
					this.cur_pageindex = 1;
					loadHouseList();
				},
				choosePrice:function(index){
					this.priceindex = index;
					this.cur_pageindex = 1;
					loadHouseList();
				},
				chooseHouseType: function(index){
					this.htypeindex = index;	
					this.cur_pageindex = 1;
					loadHouseList();
				},
				chooseHouseCategory:function(index){
					this.hsindex = index;
					this.cur_pageindex = 1;
					loadHouseList();
				},
				pageto:function(pageindex){
					this.cur_pageindex = pageindex;
					loadHouseList();
				},
				pageleft:function(){
					var pgindex = this.cur_pageindex - 1;
					if(pgindex < 1){
						pgindex = 1;
					}
					this.cur_pageindex = pgindex;
					loadHouseList();
				},
				pageright:function(){
					var pgindex = this.cur_pageindex + 1;
					if(pgindex > this.total_page){
						pgindex = this.total_page;
					}
					this.cur_pageindex = pgindex;
					loadHouseList();
				}
			},
			updated: function() {
				if(this.houses.length > 0) {
					document.getElementById('housecnt').style.display = 'block';
					var that = this;
					var swppart = null;
					while(allSwpipers.length){
						swppart = allSwpipers.pop();
						swppart = null;
					}
					for(var i = 0; i < that.houses.length; i++) {
						var swp = '.swp' + i;
						var next = '.next' + i;
						var prev = '.prev' + i;
						swppart = new Swiper(swp, {
							slidesPerView: 4,
							spaceBetween: pic_spaceBetween,
							navigation: {
								nextEl: next,
								prevEl: prev,
							},
						});
						allSwpipers.push(swppart);
					}
				}
			}
		})
		var pic_spaceBetween = (1200 - 4 * 282) / 3;
		
		function initMenu() {
//			var regions = getRegionChild(getQueryString('region'));
//			maincnt.region_name = regions.region_name;
//			maincnt.region = regions.id;
//			maincnt.region_type = 0;
//			var child = regions.child;
//			var tmpchild = [];
//			var tmpfirst = {
//				id:regions.id,
//				name:'不限'
//			};
//			tmpchild.push(tmpfirst);
//			for(var i=0;i<child.length;i++){
//				var ch = {
//					id:child[i].id,
//					name:child[i].region_name
//				};
//				tmpchild.push(ch);
//			}
//			maincnt.areas = tmpchild;
//			maincnt.areaindex = 0;
			var regions = getRegionChild(getCookie('kdcurcityId'));//getRegionChild(getQueryString('region'));
			maincnt.region_name = regions.region_name;
			maincnt.region = regions.id;
			maincnt.region_type = regions.level;
			var child = regions.child;
			var tmpchild = [];
			var tmpfirst = {
				id:regions.id,
				name:'不限'
			};
			tmpchild.push(tmpfirst);
			if(child){
				for(var i=0;i<child.length;i++){
					var ch = {
						id:child[i].id,
						name:child[i].region_name
					};
					tmpchild.push(ch);
				}
			}
			maincnt.areas = tmpchild;
			maincnt.areaindex = 0;
			
			var prices = getRentPrices();
			maincnt.prices = prices;
			maincnt.priceindex = 0;
			
			maincnt.housetypes = getHouseType();
			maincnt.htypeindex = 0;
			maincnt.housestyles = getCategory();
			maincnt.hsindex = 0;
			
			maincnt.cur_pageindex = 1;
		}
		function loadHeaderAndFooter() {
			$('#page_header').load('../template/header.html');
			$('#page_menu').load('../template/mainmenu2.html', function() {
				changeMenu(4);
			});
			$('#city_sets').load('../template/choosecity.html');
			$('#page_footer').load('../template/footer.html');
		}

		function  loadHouseList(){
			data = {
				page:maincnt.cur_pageindex, 
				pageSize:maincnt.pagesize,
				region :maincnt.region, 
				price : maincnt.prices[maincnt.priceindex].id, 
				room : maincnt.housetypes[maincnt.htypeindex].id, 
				type :maincnt.housestyles[maincnt.hsindex].id, 
				name : maincnt.namekey,
				region_type:maincnt.region_type
			}
			jQuery.get(publicUrl+'/v1/renting/pc-list', data, function(res) {
				var houses = res.data.list;
				maincnt.houses = houses;
				maincnt.next_page = res.data.nextPage;
				maincnt.total_page = Math.ceil(res.data.pageNum/maincnt.pagesize);
				if(maincnt.total_page <= 10){
					var tmp = ['left'];
					for(var i=1;i<=maincnt.total_page;i++){
						tmp.push(i);
					}
					tmp.push('right');
					maincnt.page_nav = [tmp];
				}
				else{
					if(maincnt.cur_pageindex == maincnt.total_page || maincnt.cur_pageindex == maincnt.total_page-1){
						maincnt.page_nav = [['left',1],[maincnt.total_page-1,maincnt.total_page,'right']];
					}
					else if(maincnt.cur_pageindex == 1){
						maincnt.page_nav = [['left',1,2],[maincnt.total_page,'right']];
					}
					else if(maincnt.cur_pageindex == 2){
						maincnt.page_nav = [['left',1,2,3],[maincnt.total_page,'right']];
					}
					else{
						maincnt.page_nav = [['left',1],[maincnt.cur_pageindex,maincnt.next_page],[maincnt.total_page,'right']];
					}
				}
				for(var i = 0; i < maincnt.houses.length; i++) {
					if(maincnt.houses[i].brand.brandloge.indexOf('.png') < 0 && maincnt.houses[i].brand.brandloge.indexOf('.jpg') < 0) {
						maincnt.houses[i].brand.brandloge = '../img/zflogo.png';
					} else {
						maincnt.houses[i].brand.brandloge = LocalImgUrl + maincnt.houses[i].brand.brandloge;
					}
					for(var j = 0; j < maincnt.houses[i].list.length; j++) {
						maincnt.houses[i].list[j].img_path = LocalImgUrl + maincnt.houses[i].list[j].img_path;
						var hsname = maincnt.houses[i].list[j].house_name;
						hsname = hsname.replace(maincnt.houses[i].brand.bname,'');
						hsname = hsname.replace('（','');
						hsname = hsname.replace('）','');
						hsname = hsname.replace(/ /g,'');
						maincnt.houses[i].list[j].house_name = hsname;
					}
				}
				$(window).scrollTop(0);
			});
		}
	</script>

</html>